import React from 'react';
import { connect } from 'react-redux';
import TextareaAutosize from 'react-textarea-autosize';
import BaseComponent from '../../components/common/baseComponent.js';
import Button from '../../components/common/button';
import toast from '../../utils/toast';
import { not } from '../../utils/validator';

@connect(({ loading }) => {
  return {
    busy: ['invoice/addOrEditInfo', 'invoice/delInfo'].some(action => loading.effects[action]),
  };
})
class EditInvoice extends BaseComponent {
  state = {
    companyName: '',
    taxCode: '',
    companyAddress: '',
    bankBranch: '',
    invoiceInfo: null,
  }

  componentDidMount() {
    const { invoiceInfo } = this.props.location.state || {};
    if (invoiceInfo) {
      this.setState({
        invoiceInfo,
        companyName: invoiceInfo.get('companyName'),
        taxCode: invoiceInfo.get('taxCode'),
        companyAddress: invoiceInfo.get('companyAddress'),
        bankBranch: invoiceInfo.get('bankBranch'),
      });
    }
  }

  companyNameChanged = (e) => {
    this.setState({
      companyName: e.target.value,
    });
  }

  taxCodeChanged = (e) => {
    this.setState({
      taxCode: e.target.value,
    });
  }

  companyAddressChanged = (e) => {
    this.setState({ companyAddress: e.target.value });
  }

  bankBranchChanged = (e) => {
    this.setState({ bankBranch: e.target.value });
  }

  clickSave = () => {
    const { busy } = this.props;
    if (busy) {
      return;
    }
    const {
      companyName,
      taxCode,
      bankBranch,
      companyAddress,
      invoiceInfo,
    } = this.state;
    if (not('company', companyName)) {
      toast('请填写正确的单位名称');
    } else if (not('taxCode', taxCode)) {
      toast('请输入正确的纳税人识别号');
    } else {
      this.props.dispatch({
        type: 'invoice/addOrEditInfo',
        payload: {
          companyName,
          taxCode,
          bankBranch,
          companyAddress,
          openType: 2,
          infoId: invoiceInfo ? invoiceInfo.get('infoId') : null,
        },
      });
    }
  }

  clickDel = () => {
    const { busy } = this.props;
    if (busy) {
      return;
    }
    const { invoiceInfo } = this.state;
    this.props.dispatch({
      type: 'invoice/delInfo',
      payload: { infoId: invoiceInfo.get('infoId') },
    });
  }

  render() {
    const { companyName, taxCode, companyAddress, bankBranch, invoiceInfo } = this.state;
    let delBtn;
    if (invoiceInfo) {
      delBtn = <Button title="删除" clickFunc={this.clickDel} className="del-btn" />;
    }

    return (
      <div className="edit-invoice-info">
        <div className="content-row header">
          <div>开票类型</div>
          <div className="text">企业发票</div>
        </div>
        <div className="content-row top">
          <div>单位名称</div>
          <TextareaAutosize type="text" placeholder="请输入单位名称" value={companyName} onChange={this.companyNameChanged} />
          <i className="iconfont icon-arrow" />
        </div>
        <div className="content-row">
          <div>纳税人识别号</div>
          <TextareaAutosize type="text" placeholder="请输入纳税人识别号" value={taxCode} onChange={this.taxCodeChanged} />
          <i className="iconfont icon-arrow" />
        </div>
        <div className="content-row">
          <div>地址和电话</div>
          <TextareaAutosize type="text" placeholder="请输入地址和电话(非必填)" value={companyAddress} onChange={this.companyAddressChanged} />
          <i className="iconfont icon-arrow" />
        </div>
        <div className="content-row">
          <div>开户行和账户</div>
          <TextareaAutosize type="text" placeholder="请输入开户行和账户(非必填)" value={bankBranch} onChange={this.bankBranchChanged} />
          <i className="iconfont icon-arrow" />
        </div>
        {delBtn}
        <Button title="保存" clickFunc={this.clickSave} disabled={!(companyName && taxCode)} className="save-btn" />
      </div>
    );
  }
}

export default EditInvoice;
